<template>
  <div class="beijing">
   
    <div class="shouye">
      <div class="left">
        <div class="xinxi animate__animated animate__fadeInDown">
          <div class="tu">
            <img :src="getImg(from.img)"  alt="">
          </div>
          <div class="name">{{ from.name || '' }}</div>
          <div class="gongsi">{{ from.gongzi || '' }} </div>
          <div class="zhiwei">{{ from.zhiwei || '' }}</div>
        </div>
        <!-- v-if="false" -->
        <div class="" v-if="show">
          <div class="daohang animate__animated animate__fadeInUp">
            <div class="item" @click="dianji(item)" :class="daohangActive == item.id ? 'active' : ''"
              v-for="(item, i) in daohangList" :key="i">
              <img :src="getImg(item.icon)" alt="">
              <div>{{ item.name }}</div>
            </div>
          </div>
          <div class="al" @click="xiaoji">
            <img src="@/assets/images/al.png" alt="">
          </div>
        </div>

        <div v-if="!show">
          <div class="left_text animate__animated animate__fadeInUp">
            <div class="ltItem" v-for="(item, i) in duiList" :key="i">
              <img src="@/assets/images/duihao.png" alt="">
              <div>
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="jinru" @click="jinru">
            点击进入工作台
            <img src="@/assets/images/jinru.png" alt="">
          </div>
        </div>

      </div>
      <div class="right">
        <router-view />
      </div>

    </div>
  </div>
</template>

<script>

export default {
  components: {
   
  },
  data() {
    return {
      juseShow: 1,
      value: '1',
      daohangActive: '1',
      from: {},
      show: false,
      uerList: [
        {
          name: '汪雨菲',
          zhiwei: '商业招商经理',
          gongzi: '',
          img:'juese3.jpg',
        },
        {
          name: '白晓雨',
          zhiwei: '运营经理',
          gongzi: '一体化服务公司 ',
          img:'juese1.jpg',
        },
        {
          name: '汪雨菲',
          zhiwei: '运营经理',
          gongzi: '一体化服务公司',
          img:'juese0.jpg',
        },
      ],
      duiList: [
        {
          name: '精准获客',
        },
        {
          name: '提升消费转化',
        },
        {
          name: '打造常客经济',
        },
      ],
      options: [{
        value: '1',
        label: 'pc端工作台'
      }, {
        value: '2',
        label: 'ioc运营经理'
      }, {
        value: '3',
        label: '营销经理'
      }, {
        value: '4',
        label: '服务经理'
      },
      {
        value: '5',
        label: '商家店长'
      },
      {
        value: '6',
        label: '商家运营者'
      },
      ],
      daohangList: [
        {
          name: '首页',
          id: '1',
          icon: 'shouye.png',
          url:'/govIndexData4/juese'
        },
        {
          name: '消息中心',
          id: '2',
          icon: 'xiaoxi.png',
        },
        {
          name: '个人中心',
          id: '3',
          icon: 'geren.png',
        },
      ],
      activeIndex: '0',
      activeIndex2: '0',

    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.$nextTick(() => {
          // if (val.name == 'juese3') {
          //   this.from = this.uerList[2]
          // } else if (val.name == 'juese1') {
          //   this.from = this.uerList[1]
          // } else {
            this.from = this.uerList[0]
          // }
          if (val.name == 'home') {
            this.show = false
          } else {
            this.show = true
          }
        })

      },
      // 深度观察监听
      deep: true,
      immediate: true,
    }
  },
  mounted() {

    // console.log(juseIndex,'juseIndex')
    // juseShow
    this.juseShow = this.$route.query.role ? this.$route.query.role : 1

  },
  methods: {
    name() {

    },
    jinru(){
      this.$router.push({
          path: '/govIndexData4/juese',
        })
    },
    getImg(res) {
      //必须拼接一下
      return require(`@/assets/images/${res}`);//res就是图片的名字
    },
    xiaoji(){
      this.$router.push({
          path: '/govIndexData4/duihua',
        })
    },
    dianji(item) {
      this.daohangActive = item.id
      if(item.url){
        this.$router.push({
          path:item.url
        })
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
}
</script>
<style lang="scss">


.is-active {
  color: #0661FB !important;
}

.is-opened {
  color: #0661FB !important;
  background: rgba(0, 0, 0, 0) !important;
}
</style>
<style lang="scss" scoped>
 @import "../../../assets/css/index.scss";
</style>